<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #child {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        #parent {
            width: 400px;
            height: 400px;
            border: 2px solid;
        }
    </style>
</head>

<body>

    <section id="parent">
        <div id="child">
            <div></div>
        </div>
    </section>


    <script>

        //----- 什么是事件
        //交互

        //事件流：事件传播的方向
        //IE认为的事件流是事件冒泡
        //网景(netscape)认为的事件流是事件捕获

        //在js当中我们只能获取到冒泡或者捕获其中一个阶段

        //---- 事件冒泡
        // 即事件开始有最里层具体的某个元素接收，然后逐级往上传播，直到不具体的某个节点

        let child = document.getElementById('child');
        let parent = document.getElementById('parent');
        //child
        // child.onclick = function () {
        //     alert('child')
        // }
        //parent
        // parent.onclick = function () {
        //     alert('parent')
        // }
        // //body
        // document.body.onclick = function () {
        //     alert('body')
        // }
        //html
        // document.documentElement.onclick = function () {
        //     alert('html')
        // }
        // //document
        // document.onclick = function () {
        //     alert('document')
        // }
        // //window
        // window.onclick = function () {
        //     alert('window')
        // }

        //----- 事件捕获
        //事件由不具体的某个节点接收，再一层一层往里传播
        child.addEventListener('click', function () {
            alert('child')
        }, true)
        parent.addEventListener('click', function () {
            alert('parent')
        }, true)
        document.body.addEventListener('click', function () {
            alert('body')
        }, true)
        document.documentElement.addEventListener('click', function () {
            alert('html')
        }, true)

        document.addEventListener('click', function () {
            alert('document')
        }, true)
        
        let test= function () {
            alert('window')
        };
        window.addEventListener('click',test, true)

        




    </script>

</body>

</html>